<template>
  <div class="carousel-wrapper">
    <b-carousel
      v-model="currentSlideInner"
      indicators
      background="transparent"
      :interval="0"
      style="text-shadow: 1px 1px 2px #333;"
    >
      <b-carousel-slide
        v-if="!carousels || carousels.length === 0"
        caption="wulala"
        img-blank
      >
        <p>content</p>
      </b-carousel-slide>
      <b-carousel-slide
        v-for="carousel in carousels"
        :key="carousel.id"
        :caption="carousel.caption"
        img-blank
      >
        <p>{{ carousel.desc }}</p>
      </b-carousel-slide>
    </b-carousel>

    <!-- <b-container fluid>
      <b-row align-h="center">
        <b-col sm="10">
          <div class="carousel-control-container">
            wulala
          </div>
        </b-col>
      </b-row>
    </b-container> -->
  </div>
</template>

<script>
export default {
  model: {
    prop: 'currentSlide',
    event: 'slid',
  },
  props: {
    currentSlide: {
      type: Number,
      default: 0,
    },
    carousels: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    currentSlideInner: {
      get: function() {
        return this.currentSlide;
      },
      set: function(val) {
        this.$emit('slid', val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.carousel-wrapper {
  ::v-deep .carousel-caption {
    top: 40%;
  }
  ::v-deep .carousel-item img.img-fluid {
    max-height: 712px;
  }
  ::v-deep .carousel-caption h3 {
    font-size: 64px;
    color: #fff;
    @include media-breakpoint-down(md) {
      font-size: 56px;
    }
  }
  ::v-deep .carousel-caption p {
    font-size: 32px;
    @include media-breakpoint-down(md) {
      font-size: 30px;
    }
  }
}
.carousel-control-container {
  height: 75px;
  /* width: 1200px; */
  background-color: #ccc;
  position: absolute;
}
</style>
